<template>
  <el-dialog
      v-model="visible"
      title="2025年度医疗系统党建学习交流活动"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleClose"
  >
    <!-- 活动信息 -->
    <div class="activity-info">
      <p class="activity-time">2025年11月15日 14:00 - 17:00</p>
    </div>

    <!-- 二维码和选择党员区域 -->
    <div class="qr-code-section ">
      <div class="qr-code-container">
        <img src="" alt="" class="qr-code-image border">
        <div>
          <button class="download-btn">
            <el-icon><Download /></el-icon>
            下载二维码
          </button>
          <p class="qr-code-tip">使用手机扫描二维码即可完成签到</p>
        </div>
      </div>

      <div class="select-member-container">
        <img src="../../../../assets/smart/三会一课图标.png" alt="" style="width: 60px;display: block;height: 60px;margin-bottom: 20px">
        <div>
          <el-button type="primary" class="select-member-btn" @click="selectMember">
            <el-icon><User /></el-icon>
            选择党员
          </el-button>
        </div>
        <p class="select-member-tip">为未携带手机的党员手动选择签到</p>
      </div>
    </div>

    <!-- 已签到列表 -->
    <div class="signed-list">
      <div class="list-header">
        <span class="title">已签到列表</span>
        <span class="count">(已签到: {{ signedList.length }}人)</span>
      </div>

      <el-table :data="signAndLeaveList.signList" style="width: 100%">
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template #default="{ row }">
            <span>{{row.cpcInfo.pbUserName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="科室">
          <template #default="{ row }">
            <span>{{row.cpcInfo.pbDepartMent.departMenName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="党支部">
          <template #default="{ row }">
            <span>{{row.cpcInfo.pbCommittee.committeeName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="签到时间">
          <template #default="{ row }">
            <span>{{row.manageTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-tag size="small" type="success" >
              <el-icon><Check />
                 <span>{{row.manageState == 1? '签到':'请假'}}</span>
              </el-icon>
            </el-tag>
          </template>

        </el-table-column>
      </el-table>
    </div>

    <!-- 操作按钮 -->
    <template #footer>
      <div class="action-buttons">
        <el-button @click="exportSignedList">导出签到表</el-button>
        <el-button type="primary" @click="completeSign">完成</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Download, User, Check } from '@element-plus/icons-vue';
import {getActivityUserList} from "@/api/life/relationship.js";

// 弹窗显示状态
const visible = ref(false);
const signAndLeaveList = ref({
  signList:[],
  leaveList:[]
});

// 获取签到信息集合
async function loadSignList(id) {
  try {
    const response = await getActivityUserList({ activityID: id });
    if (response.status == 200 && response.data.code == 200) {
      let data = response.data.data;
      signAndLeaveList.value = {
        signList: data.registerUserInfoList,
        leaveList: data.sickUserInfoList
      };
      console.log("signAndLeaveList,",signAndLeaveList.value)
    }
  } catch (error) {
    ElMessage.error('加载活动信息时发生错误');
  }
}















// 已签到列表数据
const signedList = reactive([
  { index: 1, name: '张伟', department: '心血管内科', partyBranch: '内科第一党支部', time: '14:02:35', status: 'success' },
  { index: 2, name: '李娜', department: '神经外科', partyBranch: '外科第二党支部', time: '14:05:12', status: 'success' },
  { index: 3, name: '王强', department: '急诊科', partyBranch: '急诊医学党支部', time: '14:08:45', status: 'success' },
  { index: 4, name: '陈芳', department: '儿科', partyBranch: '儿科医学党支部', time: '14:12:33', status: 'success' },
  { index: 5, name: '赵明', department: '骨科', partyBranch: '外科第一党支部', time: '14:15:07', status: 'success' },
  { index: 6, name: '刘洋', department: '呼吸内科', partyBranch: '内科第二党支部', time: '14:18:22', status: 'success' },
  { index: 7, name: '周婷', department: '妇产科', partyBranch: '妇产科党支部', time: '14:21:19', status: 'success' }
]);

// 显示弹窗
const show = () => {
  visible.value = true;
};

// 隐藏弹窗
const hide = () => {
  visible.value = false;
};

// 导出签到表
const exportSignedList = () => {
  ElMessage.success('正在导出签到表...');
};

// 完成签到
const completeSign = () => {
  ElMessage.success('签到已完成！');
  hide();
};

// 选择党员
const selectMember = () => {
  ElMessage.info('请选择党员进行手动签到');
};

// 关闭弹窗时的处理
const handleClose = () => {
  // 可以在这里添加关闭前的逻辑
};

// 暴露方法给父组件使用
defineExpose({
  show,
  loadSignList,
  hide
});
</script>

<style scoped lang="scss">
.activity-info {
  margin-bottom: 20px;
}

.activity-time {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.qr-code-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.qr-code-container {
  flex: 1;
  text-align: center;
}

.qr-code-image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.download-btn:hover {
  background-color: #ebeef5;
}

.qr-code-tip {
  color: #999;
  font-size: 12px;
  margin-top: 5px;
}

.select-member-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-left: 1px solid #dcdfe6;
  border-radius: 8px;
  text-align: center;
}

.select-member-btn {
  width: 140px;
  margin-bottom: 10px;
}

.select-member-tip {
  color: #999;
  font-size: 12px;
}

.signed-list {
  margin-bottom: 20px;
}

.list-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.title {
  font-weight: bold;
  color: #333;
}

.count {
  color: #e64340;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
